<template>
  <div v-if="extParam">
    <span v-if="extParam.replyCount">
      {{ extParam.replyCount }}
    </span>
    <span v-if="extParam.detailOvertime" class="red_color">
      {{ extParam.detailOvertime }}
    </span>
    <span v-if="extParam.detailNoOvertime">
      {{ extParam.detailNoOvertime }}
    </span>
    <span v-if="showMeetingRelation" class="replyCard" :title="meetingReply">
      {{meetingReply}}
    </span>
    <span v-if="extParam.RemindCount">
      {{ extParam.RemindCount }}
    </span>
  </div>
</template>

<script>
  export default {
    name: 'ExtParam',
    props: {
      slotData: {
        type: Object,
        default: () => {}
      }
    },
    computed: {
      showMeetingRelation() {
        const { extParam, applicationCategoryKey } = this.slotData;
        if (
          applicationCategoryKey === 6 &&
          extParam.meetingCountJoin &&
          extParam.meetingCountNoJoin &&
          extParam.meetingCountPending
        ) {
          return true;
        } else {
          return false;
        }
      },
      extParam() {
        return this.slotData.extParam;
      },
      meetingReply() {
        const { extParam } = this.slotData;
        return extParam.meetingCountJoin + ", "+
               extParam.meetingCountNoJoin + ", "+
                extParam.meetingCountPending;
      }
    },
    methods: {}
  };
</script>

<style scoped lang="scss">
  .subject-render {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .replyCard {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0px;
  }
</style>
